var treeImage ;
var treeBG = [];
var button = [];
var sparkle;
var rec;
var minigamebtn;

var spark = false;
var timespark = false;
var growtext = false;

var level = 1;
var reach = 10;
var waterstat = 0;
var ferstat = 0;
var pstat = 0;
var nonstop = true;
var bb=0;
var cc=0;

var canvas = document.getElementById("treeAnimation");
canvas.width = 800;
canvas.height = 600;

document.body.appendChild(canvas); //********************************* in game loop?

var mouseX=0;
var mouseY=0;

var sound = new Audio("audio/press.mp3");
var sound2 = new Audio("audio/level-up.wav");
var treeIndex = 0;
var BGIndex = 0;
var treenum = 4;
var i, isp=0;

var bx=10; // button x
var by=10;
var rwx=0; // water's rectangle x
var rpx=0;
var rfx = 0;
var ry=543;

var context = canvas.getContext("2d"); 

var bgReady = false;
for(i=0;i<3;i++) {
	treeBG[i] = new Image();
	treeBG[i].onload = function() {
		bgReady = true;
	};
}
treeBG[0].src = "images/tree-bg1.png";
treeBG[1].src = "images/tree-bg2.png";
treeBG[2].src = "images/tree-bg3.png";



var buttonReady = false;
for(i=0;i<4;i++) {
	button[i] = new Image();
	button[i].onload = function() {
		buttonReady = true;
	};
}
button[0].src = "images/water-button.png";
button[1].src = "images/p-button.png";
button[2].src = "images/fertilizer-button.png";
button[3].src = "images/exit-button2.png";


sparkle = new Image();
sparkle.onload = function() {};

sparkle.src = "images/sparkle1.png";

rec = new Image();
rec.onload = function() {};
rec.src = "images/rec2-re.png";

white = new Image();
white.onload = function() {};
white.src = "images/white.png";

grow = new Image();
grow.onload = function() {};
grow.src = "images/grow.png";

var miniReady=false;
minigamebtn = new Image();
minigamebtn.onload = function(){
		miniReady=true;
	};
	minigamebtn.src = "images/mini-button.png";//*/

function gameLoop() {
	window.requestAnimationFrame(gameLoop);
	
	tree.update();
	tree.render();
}

function redraw() {
		context.drawImage(treeBG[BGIndex], 0, 0); 
		
		for(i=0; i<3; i++){
			context.drawImage(button[i], bx, by); 
			by+=120;
		}
		
		context.drawImage(button[3], 555, 10);
		
		if(bb>0){
			context.drawImage(minigamebtn,655, 250);
		}
		
		
		bx = 10;
		by = 10;
		
		//fill rectangle
		context.drawImage(rec, 10, 565);
		context.fillStyle = "rgb(0,255,30)";
		context.fillRect(13, 566, rfx, 22);
		
		context.drawImage(rec, 10, 530);
		context.fillStyle = "rgb(255,255,0)";
		context.fillRect(13, 531, rpx, 22);
		
		context.drawImage(rec, 10, 495);
		context.fillStyle = "rgb(0,222,255)";
		context.fillRect(13, 496, rwx, 22);
		
}

function sprite(options) {
	var that = {}, 
	frameIndex = 0, 
	tickCount = 0, 
	ticksPerFrame = options.ticksPerFrame || 0;
	
	numberOfFrames = options.numberOfFrames || 1;
	
	hx = 0;
	hy = 0;
	
	that.context = options.context;
	that.width = options.width;
	that.height = options.height;
	that.image = options.image;
	that.loop = options.loop;

	that.update = function() {
		
		tickCount += 1;
		
		if (tickCount > ticksPerFrame) {
			tickCount = 0;
			// If the current frame index is in range
			if (frameIndex < numberOfFrames) {
				// Go to the next frame
				frameIndex += 1;
				if (frameIndex==2) {
					frameIndex = 0;
				}
			}
		}
	};

	that.render = function() {
		// Clear the canvas // Delete the frame before
		that.context.clearRect(hx, hy, that.width, that.height);
		
		// Draw the animation
		redraw();
		that.context.drawImage(that.image, frameIndex * that.width / numberOfFrames, 0, that.width / numberOfFrames, that.height, hx, hy, that.width / numberOfFrames, that.height);
		
		if(spark){ 		// give sparkle when button is pressed 
			giveSpark();
		}
		
		if(growtext){		// show the text 'GROW UP' when level is up
			growt();
		}
		
	};
	return that;
}




//==================================		SPARK & Grow text		===================================
function giveSpark(){
		context.drawImage(sparkle, 0, 0);
		setTimeout(stopSpark, 500);
}
function stopSpark(){	spark = false;	}

function growt(){
	context.drawImage(grow, 0, 0);
	setTimeout(stopGrowt, 1000);
}
function stopGrowt(){	growtext = false;	}

//==================================		SPARK & Grow text		===================================
//==================================		Status		===================================
function updatewater(){		// Update the status bar below when button is clicked
	rwx += 777/reach;
	if(rwx >= 777){
		rwx = 777;
	}
	waterstat++;
}
function updatep(){
	rpx += 777/reach;
	if(rpx >= 777){
		rpx = 777;
	}
	pstat++;
}
function updatefer(){
	rfx += 777/reach;
	if(rfx >= 777){
		rfx = 777;
	}
	ferstat++;
}
//==================================		Status		===================================
//==================================		LEVEL		===================================
function levelUP(){
	
	if (sound2.currentTime > 0) {
		sound2.currentTime = 0;
		//this is to make sure the sound resets if it is still playing
		}
		sound2.play();
	
	level++;
	growtext = true;
	reach = reach * level;
	if (level == 2) {
		treeImage.src = "images/tree2-sprite2.png";
	} else if (level == 3) {
		treeImage.src = "images/tree3-sprite.png";
	} else if (level == 4) {
		treeImage.src = "images/tree4-sprite.png";
	}

	if (level < 5) {
		resetLevel();
	}

}
function resetLevel(){
	rwx = 0;
	rpx = 0;
	rfx = 0;
	waterstat = 0;
	pstat = 0;
	ferstat = 0;
	cc=0;
	
	render();
}
//==================================		LEVEL		===================================

treeImage = new Image();


var tree = sprite({
	context : canvas.getContext("2d"),
	width : 1600,//width : 1000,//width : 1600,
	height : 600,//height : 100,//height : 600,
	image : treeImage,
	numberOfFrames : 2,
	ticksPerFrame : 50
});

//==================================		mini-game		=================================

function minigame(b){
	bb=b;
	if(b==1){
		treeBG[0].src = "images/tree-bg3.png";
	}
	if(b==2)	
		treeBG[0].src = "images/tree-bg2.png";
}

function tap(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
	
	if(waterstat>10 && ferstat>=7 && pstat>=15 && level==2 && cc <1){
			minigame(1);
			nonstop = false;
			stop = true;
			cc = cc+1;
			
	}
	if(waterstat>16 && ferstat>=7 && pstat>=15 && level==3 && cc<1){
			minigame(2);
			nonstop = false;
			stop = true;
			cc = cc+1;
	}
	
	//exit
	if(mouseX>=555 && mouseX<=798 &&mouseY>=10 && mouseY<=58){
		window.close();
	}
	else if(mouseX>=10 && mouseX<=110 &&mouseY>=10 && mouseY<=110){ // watering
		if(nonstop){
		spark = true;
		button[0].src = "images/water-button2.png";
		setTimeout(function swapback(){	button[0].src = "images/water-button.png";	}, 100);
		updatewater();}
		
		if (sound.currentTime > 0) {
		sound.currentTime = 0;
		//this is to make sure the sound resets if it is still playing
		}
		sound.play();
		
		if(waterstat>=reach && pstat>=reach && ferstat>=reach){	levelUP();}
	}
	else if(mouseX>=10 && mouseX<=110 &&mouseY>=135 && mouseY<=235){ // shovel
		if(nonstop){
		spark = true;
		button[1].src = "images/p-button2.png";
		setTimeout(function swapback(){	button[1].src = "images/p-button.png";	}, 100);
		updatep();}
		
		if (sound.currentTime > 0) {
		sound.currentTime = 0;
		//this is to make sure the sound resets if it is still playing
		}
		sound.play();
		
		if(waterstat>=reach && pstat>=reach && ferstat>=reach){	levelUP();}
	}
	else if(mouseX>=10 && mouseX<=110 &&mouseY>=255 && mouseY<=355){ // fertilizer
		if(nonstop){
		spark = true;
		button[2].src = "images/fertilizer-button2.png";
		setTimeout(function swapback(){	button[2].src = "images/fertilizer-button.png";	}, 100);
		updatefer();
		if (sound.currentTime > 0) {
		sound.currentTime = 0;
		//this is to make sure the sound resets if it is still playing
		}
		sound.play();
		}
		if(waterstat>=reach && pstat>=reach && ferstat>=reach){	levelUP();}
		
		
	}
	else if(mouseX>=685 && mouseX<=784 &&mouseY>=250 && mouseY<=350 && bb>0){
		if(bb==1)
			playMiniGame1();
		if(bb==2)
			playMiniGame2();
		
	}
	
};

//++++++++++++++++++++++++ MINI GAME CAT +++++++++++++++++++++++++++++++++++++
function playMiniGame1(){
	window.open("minigame.html","","width=800,height=600");
	var password = prompt("Please Enter Password from mini game");
	if(password==14235)
	{	bb=0;
		nonstop = true;
		treeBG[0].src = "images/tree-bg1.png";}
	//minigamebtn.src = null;
	
	
}

//+++++++++++++++++++++++ MINI GAME BUFF ++++++++++++++++++++++++++++++++++++
function playMiniGame2(){
	window.open("minigame-buf.html","","width=800,height=600");
	var password = prompt("Please Enter Password from mini game");
	if(password==34566)
	{	bb=0;
		nonstop = true;
		treeBG[0].src = "images/tree-bg1.png";}
}

// Start the game loop as soon as the sprite sheet is loaded

treeImage.addEventListener("load", gameLoop);
document.addEventListener("mousedown", tap);

treeImage.src = "images/tree1-sprite2.png"; 